Ext.ns('app.topics');

Ext.define('app.topics.Model', {
    extend: 'Ext.data.Model',
    fields: [
     	{name:'id' , type:'integer'},
     	{name:'code' , type:'string'},
        {name:'title' , type:'string'}
    ]
});

Ext.define('app.topics.Panel',{
    
	  extend:'Ext.panel.Panel',
	/**
	  * Data controller url
	  * @property string
	  */
	  controllerUrl:false,	
	  
	  canEdit:false,
	  canDelete:false,
	  
	  /**
	   * Related item selection mode
	   * @property boolean
	   */
	  selectMode:false,

	  /**
	    * @property {Ext.grid.Panel}
	    */
	   dataGrid:null,
	   /**
	    * @property {Ext.data.Store}
	    */
	   dataStore:null,
	   /**
	    * @property {searchBar}
	    */
	   searchField: null,
	   /**
	    * @property {Ext.Button}
	    */
	   addItemBtn: null,
	   
	   constructor: function(config) {		
		    this.controllerUrl = app.createUrl([app.admin , 'topics'] , app.delimeter) + app.delimeter,
			config = Ext.apply({
				layout:'fit'
		    }, config);		
			this.callParent(arguments);
	   },
		
	   initComponent:function(){		
		   this.dataStore = Ext.create('Ext.data.Store', {
			    model: 'app.topics.Model',
			    proxy: {
			        type: 'ajax',
			    	url:this.controllerUrl +  'list',
			        reader: {
			            type: 'json',
			            root: 'data',
			            idProperty: 'id'
			        },
				    simpleSortMode: true
			    },
		        remoteSort: false,
			    autoLoad: true,
			    sorters: [{
	                  property : 'title',
	                  direction: 'DESC'
	            }]
			});
				
		    this.searchField = new SearchPanel({store:this.dataStore,local:true,fieldNames:['code','title']});
	
		    var isHidden = false;
		    if(!this.canEdit || this.selectMode){
		    	isHidden = true;
		    }
		    
			this.addItemBtn = new Ext.Button({
				 text:'Add Item',
				 hidden:isHidden
			});
			
			if(!this.selectMode){
				this.addItemBtn.on('click' , function(){
					 this.showPageEdit(0);
				} , this);
			}
			this.dataGrid = Ext.create('Ext.grid.Panel',{
					store: this.dataStore,
				 	viewConfig:{
				 		stripeRows:false
				 	},
		            frame: false,
		            loadMask:true,
				    columnLines: true,
				    autoscroll:true,
				    tbar:[
				          this.addItemBtn , '->'  , this.searchField
				    ],
				    columns: [
								{
						            sortable: true,
						            text: 'Page Code',
						            dataIndex: 'code',
						            width:80
						        },{
								    sortable: true,
								    text: 'Title',
								    dataIndex: 'title',
								    flex:1
								}
				    ]
					
			});
			if(!this.selectMode){	
				this.dataGrid.on('itemdblclick',function(view , record , number , event , options){		
						this.showPageEdit(record.get('id'));
	    		},this);		
			}
			
		   this.items=[this.dataGrid];
		   
		   this.callParent(arguments);
	   },
	   /**
	    * Show editor window for item
	    * @param id
	    */
	   showPageEdit: function(id){
			var win = Ext.create('app.topics.Window', {
				dataItemId:id,
				canDelete:this.canDelete,
				canEdit:this.canEdit
			});
			win.on('dataSaved' , function(){
				this.dataStore.load();
			}, this);	
			
			win.show();	
			
			if(id){
				win.loadData(id , false);
			}				
		} 
});


Ext.define('app.topics.Window',{
	  extend:'app.editWindow',
	  textPanel:null,
	  constructor: function(config) {		
			config = Ext.apply({
		        title: 'Topics :: Edit Item',
		        width: 720,
		        height:640,
		        objectName:'topics',
		        controllerUrl:app.root
		    }, config);		

			this.callParent(arguments);

			this.contentTabs.getComponent(0).add([
				{
					fieldLabel:"Title",
					allowBlank:false,
					name:"title",
					xtype:"textfield"
				},{
					allowBlank: false,
					fieldLabel:"Page Code",
					name:"code",
					vtype:"alphanum",
					xtype:"textfield",
					enableKeyEvents:true,
					validateOnBlur :false,
					listeners:{
						'keyup' : {
							 fn: this.checkCode,
							 scope:this,
							 buffer:400
						}
					}
				},
			 ]);			
	   },
	   checkCode: function(field  , event)
	   {
			 var val = field.getValue();
			 
			 Ext.Ajax.request({
			 		url: this.controllerUrl + "checkcode",
			 		method: 'post',
			 		params:{
			 			'id':this.editForm.getForm().findField('id').getValue(),
			 			'code':val
			 		},
			         success: function(response, request) {
			 			response =  Ext.JSON.decode(response.responseText);
			 			if(response.success){
			 				field.setValue(response.data.code);
			 				field.unsetActiveError();
			 			}else{
			 				field.markInvalid(response.msg);
			 				field.setActiveError(response.msg);
			 			}	
			       },
			       failure:function() {
			       	Ext.Msg.alert('Message', "Server is not responding");   	
			       }
			 	});		  
		}
});